﻿@{
    ViewBag.Title = "Videos";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<h2>@ViewBag.Title</h2>

<div style="margin-bottom: 20px; margin-left: 20px;">
    &laquo; @Html.ActionLink("Admin Home", "Index")
</div>

<div>
<input type="button" value="Add" data-bind="click: addClick" />
<input type="button" value="Save" data-bind="click: saveClick" />
Sort: <select data-bind="options: ItemFields(), value: CurrentItemField, event: {change: sortChanged}"></select>
Direction: <select data-bind="options: SortDirection(), value: CurrentSortDirection, event: {change: sortDirectionChanged}"></select>
</div>

<div class="modelItemWrapper">
    <!-- ko foreach: { data: Items, afterAdd: afterVideoItemAdded } --><div class="itemCard">
        <label>Date and Time:</label> <input type="text" class="dateTimePicker" data-bind="value: Date" />
        <br />
        <label>Title:</label> <input type="text" data-bind="value: Title" />
        <br />
        <label>Description:</label><textarea data-bind="value: Description"></textarea>
        <br />
        <label>Url:</label><input type="text" data-bind="value: Url" />
        <br />
        <label>Embed Url:</label><input type="text" data-bind="value: EmbedUrl" />
        <br />
        <label>Embed Image Url:</label><input type="text" data-bind="value: EmbedImageUrl" />
        <br />
        <input type="button" value="Remove" data-bind="click: $root.removeClick" />
    </div><!-- /ko -->
</div>

<script type="text/javascript">

    var PageViewModel = ko.mapping.fromJS($.extend({}, PageViewModelBase, new function () {

        this.Name = 'Videos';

        this.Item = $.extend(true, PageViewModelBase.Item, new function () {
            this.EmbedImageUrl = 'http://img.youtube.com/vi/[VideoIDGoesHere]/0.jpg';
            this.EmbedUrl = 'http://www.youtube.com/embed/[VideoIDGoesHere]?autoplay=1&hd=1';
        });

        this.SortDirection = ko.observableArray(['Asc', 'Desc']);
        this.CurrentSortDirection = ko.observable('Asc');

        this.addClick = function (data, event) {
            var item = data.Item.New();
            this.Items.push(item);
        };

        this.afterVideoItemAdded = function (domNode, index, data) {
            var itemJq = $(domNode);
            var date = typeof (data.Date()) == 'string' ? data.Date().indexOf('Date(') == -1 ? null : data.Date().toDateTime() : data.Date();
            if (date != null)
                setTimeout(function () { itemJq.children(".dateTimePicker").datetimepicker({ showSecond: true, dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm:ss' }).datetimepicker('setDate', date); }, 0);
            else
                setTimeout(function () { itemJq.children(".dateTimePicker").datetimepicker({ showSecond: true, dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm:ss' }) }, 0);
        };

        this.removeClick = function (data, event) {
            if (confirm("Are you sure you want to remove item titled " + data.Title()))
                PageViewModel.Items.remove(data);
        };

        this.saveClick = function (data, event) {
            if (confirm("Are you sure you want to save the changes ?"))
                PageViewModel.Save();
        };

        var sortData = function () {
            var viewModel = PageViewModel;
            viewModel.Items.sort(function (a, b) {
                var sortDirection = viewModel.CurrentSortDirection().toLowerCase();
                if (!a[viewModel.CurrentItemField()])
                    return 1;

                var valueA = a[viewModel.CurrentItemField()](), valueB = b[viewModel.CurrentItemField()]();

                if (sortDirection == "asc")
                    return valueA < valueB ? -1 : valueA == valueB ? 0 : 1;
                else
                    return valueA < valueB ? 1 : valueA == valueB ? 0 : -1;
                //if a < b : -1, a=b : 0, a>b : +1
            });
        };

        this.sortChanged = function (data) {
            sortData();
        };

        this.sortDirectionChanged = function (data) {
            sortData();
        };

    }), { 'copy': ['Name', 'Item'] });

    ko.applyBindings(PageViewModel);

    _hD.push(function () { PageViewModel.Load(); });

</script>